<template>
  <div class="login-box">
	 <!-- 顶部菜单栏 -->
     <div class="login-header">
      <van-icon  name="wap-home-o" size="22" @click="toHome" />
      <span class="header-title">网易严选</span>
      <div class="header-right">
        <van-icon name="search" size="22" />
        <van-icon name="shopping-cart-o" size="22" />
      </div>
     </div>
	 <!-- 轮播图 -->
	 <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white" height='375'>
		<van-swipe-item><img src="https://yanxuan-item.nosdn.127.net/1453294de9096d0a69a8bce415abc429.jpg?type=webp&imageView&quality=75&thumbnail=750x0"></van-swipe-item>
		<van-swipe-item><img src="https://yanxuan-item.nosdn.127.net/11ec6d3683a7c7de97fd97110aae5d6c.jpg?type=webp&imageView&quality=75&thumbnail=750x0"></van-swipe-item>
		<van-swipe-item><img src="https://yanxuan-item.nosdn.127.net/e2ddacadba3134e4cffc77bdd457f6e9.jpg?type=webp&imageView&quality=75&thumbnail=750x0"></van-swipe-item>
		<van-swipe-item><img src="https://yanxuan-item.nosdn.127.net/11ec6d3683a7c7de97fd97110aae5d6c.jpg?type=webp&imageView&quality=75&thumbnail=750x0"></van-swipe-item>
		<van-swipe-item><img src="https://yanxuan-item.nosdn.127.net/72d6adee90bbb75d0514dbad458e3cc5.jpg?type=webp&imageView&quality=75&thumbnail=750x0"></van-swipe-item>
	 </van-swipe>
	 <!-- 价格 -->
	 <div class="col">
		<div class="head">每日抄底 <span>|</span>距离结束<span><van-count-down class="count" millisecond :time="time" format="mm:ss:SS" /></span></div>
		<div class="priceArea">￥39.9</div>
	 </div>
	 <!-- 广告栏 -->
	 <div class="notice">
		<van-notice-bar mode="closeable">Pro会员立享免邮，再省¥99</van-notice-bar>
	 </div>
	 <!--商品名称 -->
	 <div class="name">好喝到冒泡 桂花气泡酸梅汤410ml*9瓶</div>
	 <!-- 购买 -->
	<div class="detailFooter">
		<button class="icon"><img class="service" src="http://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/detail-kefu-d10f0489d2.png?imageView&type=webp"></img></button>
		<button class="buyNow">立即购买</button>
		<button class="addShopCart">加入购物车</button>
	</div>
	 <!-- 详情介绍 -->
	 <div class="recommendReason">
		<p>①传统熬煮工艺，保留自然风味</p>
		<p>②咕嘟咕嘟会冒泡，酸甜新口感</p>
		<p>③甄选桂花山楂和乌梅，入口顺滑不涩</p>
	 </div>
	 <!-- 最大图片 -->
	 <img style="width:375px" src="https://yanxuan-item.nosdn.127.net/8e53808b23287e3e59a9ea759d8a9cf2.gif?imageView">
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      time: 30 * 60 * 1000,
    };
  },
  methods:{
    toHome(){
      this.$router.push('/home')
    }
  }
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.cartImg {
  display: block;
  width: 134px;
  height: 45px;
  margin: 80px auto;
}
.login-box {
  height: 100%;
  width: 100%;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .my-swipe img {
    width: 100%;
    height: 100%;
  }
  .login-header {
    padding: 0 8px 0 12px;
    display: flex;
    background-color: white;
    align-items: center;
    align-content: flex-start;
    justify-content: space-between;
    height: 44px;
    border-bottom: 1px solid #f9f9f9;
    // &.van-icon{
    // 	margin-right: 50px;
    // }
    .header-title {
      height: 27px;
      line-height: 27px;
      font-size: 18px;
      font-weight: bolder;
      margin-left: 45px;
    }
    .header-right {
      .van-icon {
        margin-right: 10px;
      }
    }
  }
  .col {
    width: 100%;
    height: 74px;
    background: rgb(250, 30, 50);
    .head {
      font-size: 14px;
      padding: 10px 0 0 10px;
      color: #fff;
    }
    .head span {
      margin: 0 5px;
    }
    .count {
      width: 55px;
      color: #fff;
      display: inline;
    }
    .priceArea {
      font-weight: 700;
      margin: 10px 0 0 10px;
      color: #fff;
      white-space: nowrap;
    }
  }
  .notice {
    width: 100%px;
    height: 40px;
    margin: 15px 10px 0 10px;
  }
  .name {
    font-size: 16px;
    color: #333;
    height: 48px;
    line-height: 48px;
    margin: 15px 10px 0 10px;
    font-weight: 700;
  }
  .detailFooter {
    height: 50px;
    line-height: 50px;
    background: #fff;
   
	border-bottom: 1px solid #eeeeee;
    display: flex;
    justify-content: space-between;
    .icon {
      width: 76px;
      height: 50px;
      border-right: 1px solid #eeeeee;
      .service {
        width: 30px;
        height: 30px;
        margin: 10px 20px;
      }
    }
    .buyNow {
      width: 153px;
      height: 50px;
	  font-size: 16px;
	  border-top: 1px solid #eeeeee;
	  background-color: #fff;
    }
    .addShopCart {
      width: 152px;
      height: 50px;
	  font-size: 16px;
      color: #fff;
      background-color: #dd1a21;
    }
  }
  .recommendReason {
    width: 345px;
    height: 150px;
    margin: 15px auto;
    background: #fafafa;
    border: 1px solid #e6e6e6;
  }
  .recommendReason p {
    margin: 15px 0 0 10px;
    width: 100%;
    line-height: 25px;
    font-size: 14px;
    text-align: left;
  }
}
</style>